<!--
 * @Date: 2023-01-03 10:39:59
 * @LastEditTime: 2023-06-07 16:12:27
-->
<template>
  <div class="home">{{ $details }}
    <g-button>默认按钮</g-button>
    <g-button type="primary" round>主要按钮</g-button>
    <g-button type="success">成功按钮</g-button>
    <g-button type="danger">危险按钮</g-button>
    <g-button type="info">信息按钮</g-button>
    <g-button type="warning">警告按钮</g-button>
    <g-button type="text">文本 按钮</g-button>

    <g-drag customClass="parent">
      <div class="drag__child">
        <g-video
          ref="mVideoRef"
          customClass="mVideo"
          src="https://y1.videocc.net/static-assets/iflytek/assets/video/ai2.mp4"
          type="2"
          canvasWidth="64"
          canvasHeight="176"
          @click="control"
        />
        videoWidth="192"
            videoHeight="108"
      </div>
    </g-drag>

    <g-esign borderStyle="#000"></g-esign>
    <g-photoMagnifier width="600" height="398"></g-photoMagnifier>
    <g-enrollForm :columns="columns"></g-enrollForm>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive, onMounted, watch } from "vue";

const { proxy } = getCurrentInstance();

const control = () => {
  proxy.$refs.mVideoRef.control();
};

const columns = reactive([
  {
    title: "赛队编号",
    dataIndex: "teamNumber",
    key: "teamNumber",
  },
  {
    title: "赛队组别",
    dataIndex: "groupName",
    key: "groupName",
  },
  {
    title: "赛项类别",
    dataIndex: "trackName",
    key: "trackName",
  },
  {
    title: "赛项类别",
    dataIndex: "trackName",
    key: "trackName",
  },
  {
    title: "赛项类别",
    dataIndex: "trackName",
    key: "trackName",
  },
  {
    title: "赛项类别",
    dataIndex: "trackName",
    key: "trackName",
  },
]);
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  background: bisque;
  overflow-y: auto;

  .g-drag--parent {
    // left: unset;
    right: 10px;
    // top: 300px;

    .drag__child {
      width: fit-content;
      height: fit-content;
      border: 1px dashed;
    }
  }

  .g-enrollForm {
    width: 300px;
    height: 300px;
  }
}
</style>
